<template>
	<view class="index-container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索目的地" @click="goToSearch" disabled />
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll">
			<view class="banner-section">
				<swiper class="banner-swiper" circular autoplay interval="5000" duration="500">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.image" mode="aspectFill" class="banner-image" @click="handleBannerClick(item)"></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="quick-access">
				<view class="quick-item" @click="startWalking">
					<view class="quick-icon start-icon">
						<text class="iconfont icon-start"></text>
					</view>
					<text class="quick-text">开始运动</text>
				</view>
				<view class="quick-item" @click="goToWalkingRecord">
					<view class="quick-icon record-icon">
						<text class="iconfont icon-history"></text>
					</view>
					<text class="quick-text">运动记录</text>
				</view>
				<view class="quick-item" @click="goToOfflineMap">
					<view class="quick-icon map-icon">
						<text class="iconfont icon-map"></text>
					</view>
					<text class="quick-text">离线地图</text>
				</view>
				<view class="quick-item" @click="goToSettings">
					<view class="quick-icon settings-icon">
						<text class="iconfont icon-setting"></text>
					</view>
					<text class="quick-text">设置</text>
				</view>
			</view>
			
			<view class="section-title">
				<text class="title-text">推荐路线</text>
				<text class="more-text" @click="goToMoreRoutes">更多</text>
			</view>
			
			<view class="route-list">
				<view class="route-item" v-for="(route, index) in recommendedRoutes" :key="index" @click="viewRouteDetail(route)">
					<image :src="route.image" mode="aspectFill" class="route-image"></image>
					<view class="route-info">
						<text class="route-name">{{ route.name }}</text>
						<view class="route-data">
							<text class="route-distance">{{ route.distance }}km</text>
							<text class="route-separator">|</text>
							<text class="route-duration">约{{ route.duration }}分钟</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="section-title">
				<text class="title-text">最近活动</text>
				<text class="more-text" @click="goToWalkingRecord">全部</text>
			</view>
			
			<view class="activity-list">
				<view class="empty-tip" v-if="recentActivities.length === 0">
					<text>暂无活动记录</text>
					<button class="start-btn" @click="startWalking">开始运动</button>
				</view>
				<view class="activity-item" v-for="(activity, index) in recentActivities" :key="index" @click="viewActivityDetail(activity)">
					<view class="activity-date">
						<text class="date-day">{{ formatDay(activity.date) }}</text>
						<text class="date-month">{{ formatMonth(activity.date) }}月</text>
					</view>
					<view class="activity-info">
						<text class="activity-title">{{ activity.title }}</text>
						<view class="activity-data">
							<text class="activity-distance">{{ activity.distance }}km</text>
							<text class="activity-separator">|</text>
							<text class="activity-duration">{{ activity.duration }}</text>
						</view>
					</view>
					<image :src="activity.mapSnapshot || '/static/default-map.png'" mode="aspectFill" class="activity-map"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted, onShow } from '../../hooks';
import { userService } from '../../services/userService';

const currentUser = ref(null);

// 轮播图数据
const bannerList = ref([
	{
		image: '/static/banner1.png',
		url: '',
		id: 1
	},
	{
		image: '/static/banner2.png',
		url: '',
		id: 2
	}
]);

// 推荐路线数据
const recommendedRoutes = ref([
	{
		id: 1,
		name: '城市公园健步道',
		distance: 5.2,
		duration: 65,
		image: '/static/route1.png'
	},
	{
		id: 2,
		name: '滨海风景跑道',
		distance: 3.8,
		duration: 45,
		image: '/static/route2.png'
	}
]);

// 最近活动数据
const recentActivities = ref([]);

onMounted(() => {
	// 检查登录状态
	checkLoginStatus();
	// 获取最近活动数据
	getRecentActivities();
});

onShow(() => {
	// 每次页面显示时更新最近活动
	getRecentActivities();
});

// 获取用户登录状态
const checkLoginStatus = () => {
	userService.checkLoginStatus()
		.then(user => {
			currentUser.value = user;
		})
		.catch(() => {
			// 未登录，跳转到登录页
			redirectToLogin();
		});
};

// 前往登录页
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	});
};

// 处理登出
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				userService.logout();
			}
		}
	});
};

// 未登录时重定向到登录页
const redirectToLogin = () => {
	uni.redirectTo({
		url: '/pages/login/login'
	});
};

// 获取最近活动数据
const getRecentActivities = () => {
	// 这里应该调用实际的数据获取函数
	// 暂时使用模拟数据
	recentActivities.value = [
		{
			id: 1,
			title: '晨跑',
			distance: 3.5,
			duration: '32分钟',
			date: new Date('2023-08-15'),
			mapSnapshot: '/static/activity1.png'
		},
		{
			id: 2,
			title: '夜间健走',
			distance: 2.8,
			duration: '25分钟',
			date: new Date('2023-08-14'),
			mapSnapshot: '/static/activity2.png'
		}
	];
};

// 格式化日期天
const formatDay = (date) => {
	return new Date(date).getDate();
};

// 格式化日期月
const formatMonth = (date) => {
	return new Date(date).getMonth() + 1;
};

// 处理轮播图点击
const handleBannerClick = (item) => {
	console.log('点击了轮播图:', item);
	// 处理跳转逻辑
};

// 跳转到搜索页面
const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	});
};

// 开始运动
const startWalking = () => {
	uni.navigateTo({
		url: '/pages/map/map?mode=start'
	});
};

// 跳转到运动记录页面
const goToWalkingRecord = () => {
	uni.navigateTo({
		url: '/pages/walking-record/walking-record'
	});
};

// 跳转到离线地图页面
const goToOfflineMap = () => {
	uni.navigateTo({
		url: '/pages/offline-map/offline-map'
	});
};

// 跳转到设置页面
const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/settings/settings'
	});
};

// 查看更多路线
const goToMoreRoutes = () => {
	uni.navigateTo({
		url: '/pages/routes/routes'
	});
};

// 查看路线详情
const viewRouteDetail = (route) => {
	uni.navigateTo({
		url: `/pages/route-detail/route-detail?id=${route.id}`
	});
};

// 查看活动详情
const viewActivityDetail = (activity) => {
	uni.navigateTo({
		url: `/pages/activity-detail/activity-detail?id=${activity.id}`
	});
};
</script>

<style>
.index-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.header {
	padding: 20rpx;
	background-color: #fff;
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	height: 70rpx;
	border-radius: 35rpx;
	padding: 0 30rpx;
}

.icon-search {
	font-size: 32rpx;
	color: #999;
	margin-right: 10rpx;
}

.search-bar input {
	flex: 1;
	height: 70rpx;
	font-size: 28rpx;
}

.content-scroll {
	flex: 1;
	height: 0;
}

.banner-section {
	padding: 20rpx;
}

.banner-swiper {
	height: 300rpx;
	border-radius: 15rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.quick-access {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120rpx;
}

.quick-icon {
	width: 90rpx;
	height: 90rpx;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
}

.start-icon {
	background-color: #ff6b6b;
}

.record-icon {
	background-color: #48dbfb;
}

.map-icon {
	background-color: #1dd1a1;
}

.settings-icon {
	background-color: #feca57;
}

.quick-icon text {
	color: #fff;
	font-size: 40rpx;
}

.quick-text {
	font-size: 24rpx;
	color: #333;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	margin-top: 20rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.more-text {
	font-size: 28rpx;
	color: #999;
}

.route-list {
	background-color: #fff;
	padding: 0 20rpx 20rpx;
}

.route-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.route-item:last-child {
	border-bottom: none;
}

.route-image {
	width: 150rpx;
	height: 100rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.route-info {
	flex: 1;
}

.route-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.route-data {
	display: flex;
	align-items: center;
}

.route-distance, .route-duration {
	font-size: 26rpx;
	color: #999;
}

.route-separator {
	margin: 0 10rpx;
	color: #ddd;
}

.activity-list {
	background-color: #fff;
	padding: 0 20rpx 20rpx;
}

.empty-tip {
	padding: 40rpx;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}

.start-btn {
	margin-top: 20rpx;
	background-color: #007aff;
	color: #fff;
	font-size: 28rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	display: inline-block;
}

.activity-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.activity-item:last-child {
	border-bottom: none;
}

.activity-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 20rpx;
	width: 80rpx;
}

.date-day {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	line-height: 1;
}

.date-month {
	font-size: 24rpx;
	color: #999;
}

.activity-info {
	flex: 1;
}

.activity-title {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.activity-data {
	display: flex;
	align-items: center;
}

.activity-distance, .activity-duration {
	font-size: 26rpx;
	color: #999;
}

.activity-separator {
	margin: 0 10rpx;
	color: #ddd;
}

.activity-map {
	width: 120rpx;
	height: 80rpx;
	border-radius: 8rpx;
}
</style>
